<template>
	<view :style="[AppSkinVar]">
		<view class="bg-white">
			<view class="search-input ">
				<e-search height="30" :show-action="false" :search-icon-color="AppSkin.primary"
					:placeholder="$t('layout.请输入关键词')" v-model="keyword" @search="handleRefresh()"></e-search>
			</view>
			<filter-card :list="filterList" filterType="1" @filter="filterGoods"></filter-card>
		</view>
		<empty :text="$t('classify.暂无商品')" :icon="$staticPath('default_img.png')" :show="isEmpty"></empty>
		<view class="goods-list"  v-if="!isEmpty">
			<goods-list :leftGoodsList="leftList" :rightGoodsList="rightList"
				  ></goods-list>
			<load-more :showLoad="showLoad"></load-more>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { getGoodsList } from '@/common/request/api'
	import {
		useCurrentInstance,
		useWaterfallsPage
	} from '@/common/hooks'
	import {onReachBottom} from '@dcloudio/uni-app'

	const props = defineProps<{
		keyword ?: string
		// 分类id
		categoryOne ?: string
		categoryTwo ?: string
		// 分组id
		groupingId ?: string
		// 分区id
		subareaId ?: string
		//品牌id
		brandId ?: string
	}>()

	const ctx = useCurrentInstance()

	const keyword = ref(props.keyword||'')

	const orderByColumn = ref<string | null>(null)
	const isAsc = ref<string | null>(null)
	const filterList = [

			{
				text: 'common.综合',
				key: 'null'
			},
			{
				text: 'common.销量',
				key: 'stockSold',
				isSort: true,
				sort: ''
			},
			{
				text: 'common.价格',
				key: 'price',
				isSort: true,
				sort: ''
			}

		]

	const requestParams = computed(() => {
		let params : Record<string, any> = {}
		if (props.subareaId) {
			params = {
				subareaId: props.subareaId
			}
		} else if (props.groupingId) {
			params = {
				groupingId: props.groupingId
			}
		} else if (props.brandId) {
			params = {
				brandId: props.brandId
			}
		} else {
			params = {
				categoryId: props.categoryOne || props.categoryTwo
			}
		}


		return {
			...params,
			orderByColumn: isAsc.value ? orderByColumn.value : null,
			isAsc: isAsc.value,
			name: keyword.value
		}
	})

	const {
		showLoad,
		leftList,
		rightList,
		isEmpty,
		handleQueryPage,
		handleRefresh
	} = useWaterfallsPage({
		api: getGoodsList,
		option: {
			params: requestParams
		}
	})

	const filterGoods = (data : {
		text : string,
		key : string,
		isSort ?: boolean,
		sort ?: string
	}) => {
		if (data.key === 'null') {
			orderByColumn.value = null
		} else {
			orderByColumn.value = data.key
		}
		isAsc.value = data?.sort || ''
		handleRefresh()
	}
	handleRefresh()
	
	onReachBottom(() => {
		handleQueryPage()
	})
</script>

<style lang="scss" scoped>
	.search-input {
		padding: 30rpx 20rpx;
	}

	.keyword {
		padding: 0 30rpx;

		.title {
			padding: 24rpx 0;
		}

		.keyword-text {
			padding: 10rpx 20rpx;
			background: #f9f9fb;
			border-radius: 36rpx;
		}
	}

	.goods-list {
		height: calc(100vh - 210rpx);
	}
</style>